<template>
    <div id="myjd">
        <div id="allcontent">
            <!--头部二维码和登录注册-->
            <div id="head">
                <div id="headTOP"><!--头部二维码-->
                    <a href=""></a>
                    <a href=""></a>
                    <a id="members"></a>
                </div>
                <div id="headBottom"><!--登录注册-->
                    <a href="" id="img"></a>
                    <div id="information">
                        <p id="firstP">
                            <span>花瓣</span>
                            <span></span>
                        </p>
                        <p id="lastP">
                            <span>159****1895</span>
                            <span></span>  
                        </p> 
                    </div>
                </div>
            </div>
            <!--分类-->
            <div id="classify">
                <ul>
                    <li id="isOne">
                        <a href="">
                            <span id="i"></span>
                            <span>我的钱包</span>
                        </a>                       
                    </li>
                    <li id="lsTwo">
                        <a href="">
                            <span id="is">0</span>
                            <span>红包</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                             <span id="is">0</span>
                            <span>优惠券</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                             <span id="is">0</span>
                            <span>鲜豆</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span id="is">0</span>
                            <span>激活白条</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!--现金红包-->
            <div id="cash">
                <a href=""></a>
            </div>           
            <!--分类2-->
            <div id="myClassify">
                <ul><!--分类2:第一层-->
                    <li>
                        <a href="">
                            <i></i>
                            <span>我的关注</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i1"></i>
                            <span>我的评价</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i2"></i>
                            <span>我的地址</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i3"></i>
                            <span>会员减运费</span>
                        </a>
                    </li>
                </ul>
                <ul><!--分类2:第二层-->
                    <li>
                        <a href="">
                            <i id="i4"></i>
                            <span>签到有惊喜</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i5"></i>
                            <span>退款/售后</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i6"></i>
                            <span>客服反馈</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i7"></i>
                            <span>帮助中心</span>
                        </a>
                    </li>
                </ul>
                <ul><!--分类2:第三层-->
                    <li>
                        <a href="">
                            <i id="i8"></i>
                            <span>配送员注册</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i9"></i>
                            <span>关于我们</span>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i id="i10"></i>
                            <span>岁末狂欢</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div id="kb1"></div>
            <!--退出账户-->
            <div id="exit">
                <a href="http://127.0.0.1:8080/#/Myjd1">退出账号</a>
            </div>
        </div>
        <Navs active="iocn-nav5" active1="iocn-nav5"></Navs>
    </div>
</template>
<script>
    import $ from 'jquery';
    export default {
        
    }
</script>
<style scoped lang="scss">
//http://127.0.0.1:8080/#/myjd
    *{
        margin:0;
        padding:0;
        list-style-type:none;
        text-decoration:none;
    }
    #allcontent{
        width:750px;
        height:1112px;
        position:relative;
//头部二维码和登录注册
        #head{
            width:750px;
            height:225px;
            position:relative;
            background-image:url(../image/myjd/my_bgnew.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            //二维码
            #headTOP{
                width:146px;
                height:100px;
                display:flex; 
                position:absolute;
                right:0;               
                top:30px;

                a{
                    display:block;
                    width:44px;
                    height:44px;
                    margin-right:33px; 
                    background-repeat:no-repeat;
                    background-size:100% 100%;                   
                }
                a:nth-of-type(1){ background-image:url(../image/myjd/icon_er.png)}
                a:nth-of-type(2){ background-image:url(../image/myjd/user_message_icon.png)}

                //会员中心图片
                #members{
                    //margin-right:0;
                    position:absolute;
                    bottom:-99px;
                    right:-34px;
                    width:204px;
                    height:130px;
                    background-image:url(../image/myjd/icon_vip_card_new.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
            //登录注册
            #headBottom{
                width:750px;
                height:182px;
                padding-top:48px;
                display:flex;
                //logo
                #img{
                    width:122px;
                    height:122px;
                    display:block;
                    margin-left:32px;
                    background-image:url(../image/myjd/bg_head_new_light.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
                //用户名和手机号
                #information{
                    width:258px;
                    height:96px;
                    padding-left:20px;
                    margin-top:15px;
                    
                    //图片和手机号共有的代码
                    p{
                        width:258px;
                        height:42px;
                        display:flex;

                        span:nth-of-type(2){
                            display:block;
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    }

                    //用户名和图像
                    #firstP{

                        span:nth-of-type(1){                        
                            font-size:26px;
                            color:#fff;
                            line-height:42px;
                        }
                        span:nth-of-type(2){                          
                            width:32px;
                            height:30px;
                            margin:5px 20px;
                            background-image:url(../image/myjd/vip_icon_gray.png);  
                            background-repeat:no-repeat;
                            background-size:100% 100%;                         
                        }
                    }
                    //电话和图像
                    #lastP{                       
                        padding-top:10px;

                        span:nth-of-type(1){
                            display:block;
                            width:178px;
                            height:42px;
                            font-size:28px;
                            color:#fff;
                        }
                        span:nth-of-type(2){
                            width:28px;
                            height:28px;
                            margin:5px;
                            background-image:url(../image/myjd/icon_edit.png);
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    }
                }
                
            }
        }
//分类        
        #classify{
            width:750px;
            height:165px;
            //padding-left:30px;
            //margin-bottom:20px;
            background-color:rgb(241, 239, 239);

            ul{
                width:750px;
                height:100px;
                padding:20px 0 24px;
                display:flex;
                background-color:#fff;

                #isOne{
                    padding-right:20px;
                }
                #lsTwo{
                    border-left:1px solid #ccc;
                }
                li{
                    width:150px;
                    height:100px;
                    white-space:nowrap;

                    span:nth-of-type(1){
                       width:50px;
                       height:50px;
                       display:block;                      
                       margin:auto;
                    }
                    span:nth-of-type(2){
                        width:96px;
                        height:32px;
                        display:block;
                        margin:10px auto;
                        font-size:24px;
                        color:#222;
                        text-align:center;
                    }
                    #i{
                        background-image:url(../image/myjd/icon_packet.png); 
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                    }
                    #is{
                        font-size:26px;
                        text-align:center;
                        line-height:50px;
                    }
                    
                }
            }
        }
//现金红包
        #cash{
            width:750px;
            height:150px;

            a{
                display:block;
                width:750px;
                height:150px;
                background-image:url(../image/myjd/6c8adc25a2447f6c.png);
                background-repeat:no-repeat;
                background-size:100% 100%;
            }
        }
        #kb1{
            width:750px;
            height:20px;
            background-color:#f1efef;
        }
//分类2
        #myClassify{
            width:750px;
            height:456px;           
    
            ul{
                width:750px;
                height:154px;
                border-bottom:1px solid #ccc;
                display:flex;

                //包裹图片和文字
                li{
                    width:187.5px;
                    height:150px;                   
                    
                    a{
                        
                        //图片
                        i{
                            display:block;
                            width:88px;
                            height:88px;
                            margin:0 49.75px;
                            background-image:url(../image/myjd/59f861f1Naec07388.png);
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                        //文字
                        span{
                            display:block;
                            width:187.5px;
                            margin-top:8px;
                            height:50px;
                            font-size:28px;
                            color:#333;
                            text-align:center;
                            line-height:50px;
                        }
                        #i1{
                            background-image:url(../image/myjd/59f861f4Nb4f14ccb.png);
                        }
                        #i2{
                            background-image:url(../image/myjd/59f86219Na63aa49b.png);
                        }
                        #i3{
                            background-image:url(../image/myjd/5aa11240Ne9946bfd.png);
                        }
                        #i4{
                            background-image:url(../image/myjd/5a4b618cN592138dc.png);
                        }
                        #i5{
                            background-image:url(../image/myjd/59f86201Nbb2b1e3a.png);
                        }
                        #i6{
                            background-image:url(../image/myjd/59f8622cNa78b328b.png);
                        }
                        #i7{
                            background-image:url(../image/myjd/59f8623aN0de96396.png);
                        }
                        #i8{
                            background-image:url(../image/myjd/5b225111Nce6fb324.png);
                        }
                        #i9{
                            background-image:url(../image/myjd/59f86273N0c5a763c.png);
                        }
                        #i10{
                            background-image:url(../image/myjd/5c05f767N9ba4149a.png);
                        }
                    }
                }
            }
        }
//退出账户
        #exit{
            width:750px;
            height:92px;
            padding-bottom:128px;
            background-color:#f1efef;

            a{
                display:block;
                width:750px;
                height:92px;
                font-size:32px;
                text-align:center;
                line-height:92px;
                color:#ff5757;
                background-color:#fff;
            }
        }
    }


</style>


